﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="language" content="en" />
     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>Sale Support System</title>
    <link rel="stylesheet" type="text/css" href="/lib/css/layout-default-latest.css" />
    <link rel="stylesheet" type="text/css" href="/lib/css/themes/base/jquery.ui.all.css" />
    <link href="/lib/css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/plugins/slick.grid.css" type="text/css" />
    <link rel="stylesheet" href="/lib/css/jquery.jdMenu.css" type="text/css" />
    		<link href="/lib/css/jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
    <!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
    <style type="text/css">
        /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
        .outer-center, /* has content-div */ .outer-west, /* has Accordion */ .ui-layout-east, /* has content-div ... */ .ui-layout-east .ui-layout-content
        {
            /* content-div has Accordion */
            padding: 0;
            overflow: hidden;
        }
        .outer-center P.ui-layout-content
        {
            line-height: 1.4em;
            margin: 0; /* remove top/bottom margins from <P> used as content-div */
        }
        h3, h4
        {
            /* Headers & Footer in Center & East panes */
            font-size: 1.1em;
            background: #EEF;
            border: 1px solid #BBB;
            border-width: 0 0 1px;
            padding: 7px 10px;
            margin: 0;
        }
        .ui-layout-east h4
        {
            /* Footer in East-pane */
            font-size: 0.9em;
            font-weight: normal;
            border-width: 1px 0 0;
        }
        #loadingScreen
        {
            background: url(../images/ajax-loader.gif) no-repeat 5px 8px;
            padding-left: 25px;
        }
        .loadingScreenWindow .ui-dialog-titlebar-close
        {
            display: none;
        }
    </style>
    <!-- REQUIRED scripts for layout widget -->
    <script type="text/javascript" src="/lib/js/jquery-latest.js"></script>
    <script src="/lib/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
    <script src="/Scripts/json2.js" type="text/javascript"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>
    <script type="text/javascript" src="/lib/js/themeswitchertool.js"></script>
    <script type="text/javascript" src="/lib/js/debug.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.positionBy.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/lib/js/jquery.jdMenu.js"></script>
    <script src="/lib/js/jquery.event.drag-2.0.min.js"></script>
    <script src="/plugins/globalize.js" type="text/javascript"></script>
    <script src="/plugins/slick.core.js"></script>
    <script src="/plugins/slick.checkboxselectcolumn.js"></script>
    <script src="/plugins/slick.autotooltips.js"></script>
    <script src="/plugins/slick.cellrangedecorator.js"></script>
    <script src="/plugins/slick.cellrangeselector.js"></script>
    <script src="/plugins/slick.cellcopymanager.js"></script>
    <script src="/plugins/slick.cellselectionmodel.js"></script>
    <script src="/plugins/slick.rowselectionmodel.js"></script>
    <script src="/plugins/slick.formatters.js"></script>
    <script src="/plugins/slick.grid.js"></script>
    <script src="/plugins/surge.core.js" type="text/javascript"></script>
    <script src="/plugins/surge.slickGrid.js" type="text/javascript"></script>
    <script src="/plugins/jquery.cookie.js" type="text/javascript"></script>
    <script src="/plugins/slick.editors.js"></script>
    <script src="/plugins/jquery.colorpicker.js"></script>

    <script src="/Scripts/Helper.js" type="text/javascript"></script>
    <script src="/Scripts/AjaxLoading.js" type="text/javascript"></script>
    <script src="/Scripts/CurrentTime.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = DisplayTime;

        var myLayout;
        var helper = new Helper();
        $(document).ready(function () {
            var rolename = $.cookie("userrole");
            var username = $.cookie("username");
            if (rolename == null || rolename != 'Admin') {
                if (username != 'phrueksp') {
                    window.location = '/Page/login.aspx';
                }
            }
            //loadFrm("/Control/userManagement.htm");
            myLayout = $('body').layout({
                center__paneSelector: ".outer-center"
		, west__paneSelector: ".outer-west",
                west__size: 234
		, east__size: 300
                // RESIZE Accordion widget when panes resize
		, west__onresize: $.layout.callbacks.resizePaneAccordions
		, east__onresize: $.layout.callbacks.resizePaneAccordions
		, west__initClosed: true
            });
            $('ul.dropdown').jdMenu();
            // ACCORDION - in the West pane
            $("#accordion1").accordion({ fillSpace: true });

            // ACCORDION - in the East pane - in a 'content-div'
            $("#accordion2").accordion({
                fillSpace: true
		, active: 1
            });


            // THEME SWITCHER
            addThemeSwitcher('.ui-layout-north', { top: '12px', right: '5px' });
            // if a new theme is applied, it could change the height of some content,
            // so call resizeAll to 'correct' any header/footer heights affected
            // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
            setTimeout(myLayout.resizeAll, 1000); /* allow time for browser to re-render with new theme */
            $("#menuSaveApproval").button({
                icons: {
                    primary: "ui-icon-save"
                }
            }).click(function () {
                
                var data2 = JSON.stringify(approvalGrid.getData());
                helper.SaveAllApproveLevel(data2, function () {
                    alert('save completed');
                });
            });

            loadApproaval();
        });
        var approvalGrid;
        var cs = [];
        cs.push({ id: "ApproveName", name: "ระดับอนุมัติในระบบ", field: "approveName", width: 150 });
        cs.push({ id: "ApproveDisplay", name: "ระดับอยุมัติที่แสดง", field: "approveDisplay", width: 200, editor: Slick.Editors.Text });
        cs.push({ id: "Color", name: "สี", field: "warningColor", width: 100, formatter:Slick.Formatters.Color ,  editor: Slick.Editors.ColorSelect});
        var options = {
            editable: true,
            enableRowReordering: true,
            enableCellNavigation: true,
            asyncEditorLoading: false,
            autoEdit: true
        };
        function loadApproaval() {

            helper.GetAllApproveLevel(function (datas) {
                approvalGrid = new Slick.Grid("#ApprovalManagerGrid", datas.AllApprover, cs, options);
            });
        }


        function MainMenuInit(approver, sales) {
            var treeviewHtml = $('#browser').html();
            var htmlSecondLevel = '<li><a href="http://www.google.com" target="_blank">Google</a></li>';
            var htmlSaleComplete = '';
            var htmlOneLevel = '<li><a href="#">Search Engines &raquo;</a>{0}<ul>';


            $.each(sales, function (key, value) {
                htmlSaleComplete = htmlSaleComplete + htmlSaleLevel.format(value.display, value.username, approver.username);
            });
            var complete = htmlApproverLevel.format(approver.display) + htmlSaleComplete + '</ul></li>';
            $('#browser').html(treeviewHtml + complete);
            
        }
        
    </script>
</head>
<body>
    <div class="ui-layout-north ui-widget-content" style="display: none;">
        <div id="main_header">
            <div class="logo" style="float: left; margin-top: 10px;">
                <img src="/images/logoNawa.png" alt="Nawaplastic Co.,Ltd." />
            </div>
            <div style="float: left; margin-top: 10px; margin-left: 100px;">
                <span style="font-family: verdana; font-size: 16px; font-weight: bold;" class="ui-state-highlight"
                    id="curTime"></span>
            </div>
            <div style="float: right; margin-right: 160px;">
                <div>
                    <div style="width: 70px; float: left">
                        User as:
                    </div>
                    <span class="userInfo" id="userNameShow">UserName</span><br />
                    <div style="width: 70px; float: left">
                        Logged in as:</div>
                    <span class="userInfo" id="SpanUserIP">IP</span>
                    <br />
                    <div style="width: 70px; float: left">
                        Role as :</div>
                    <span class="userInfo" id="SpanRoleShow">Role</span>
                </div>
            </div>
        </div>
        <div id="toolbarHolder">
            <div class="ui-state-default ui-corner-all ui-helper-clearfix">
                <ul id="main-menu" class="jd_menu dropdown ui-widget-header" onmouseover="myLayout.allowOverflow('north')"
                    onmouseout="myLayout.resetOverflow(this)">
                    <li><a href="#">Application &raquo;</a>
                        <ul class="ui-state-default">
                            <li><a href="/Page/AdminDocumentPage.htm">Admin Document Management</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Admin Tools&raquo;</a>
                        <ul class="ui-state-default">
                            <li><a href="/Page/adminMain.htm">UserRole Management</a></li>
                            <li><a href="/Page/ndpriceManament.htm">ND Price Management</a></li>
                            <li><a href="/Page/SaleApprovalMapping.htm">Sale and Approver Mapping</a></li>
                            <li><a href="/Page/SaleCoordinatorMapping.htm">Sale and SaleCo Mapping</a></li>
                            <li><a href="/Page/ProductGrpManament.htm">Product Cate Manament</a></li>
                            <li><a target="blank" href="/Page/ReportViewer.aspx">Report</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="MessageBar" class="ui-layout-south ui-widget-content ui-state-error" style="display: none;">
        Message Bar
    </div>
    <div id="mainFrame" class="outer-center" width="100%" height="600" frameborder="0"
        scrolling="auto">
        <div class="ui-layout-content ui-widget-content ui-corner-bottom" style="border-top: 0;
            padding-bottom: 1em;">
            <div class="note">
                <span id="toolbar" class=" ui-corner-all" style="float: left">
                    <button id="menuSaveApproval" >
                        Save</button>
                </span>
            </div>
            <div id="ApprovalManagerGrid" style="width: 100%; height: 300px;">
            </div>
        </div>
    </div>
   
    <div class="outer-west" style="display: none;">
        <h3 class="ui-widget-header">
            Navigation</h3>
        <div class="ui-layout-content">
            <div id="accordion1" class="basic">
                <h3>
                    <a href="#">Section 1</a></h3>
                <div>
                </div>
            </div>
        </div>
    </div>
    <div id="loadingScreen" style="vertical-align: middle; text-align: center">
    </div>
</body>
</html>
